<template>
  <div>
    <div class="HouTai-header" style="text-align: center;">
      <h2>后台管理系统</h2>
    </div>
    <div class="HouTai-left">
      <h5 class="mb-2" style="text-align: center;">选择功能</h5>
      <el-menu
        default-active="2"
        @open="handleOpen"
        @close="handleClose"
      >
      <el-menu-item index="1">
         <router-link to="/ItemManage"><span>商品总计</span></router-link>
          </el-menu-item>
          <el-menu-item index="2">
         <router-link to="/ItemKind"><span>商品种类</span></router-link>
          </el-menu-item>
        <el-menu-item index="3">
          <router-link to="/AreaManage"><span>地区种类</span></router-link>
        </el-menu-item>
        <el-menu-item index="4">
         
          <router-link to="/OrderManage"> <span>订单管理</span></router-link>

        </el-menu-item>
        <el-menu-item index="5">
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="6">
          <router-link to="/LunBo"><span>轮播图片</span></router-link>
        </el-menu-item>
        <el-menu-item index="7">
          <router-link to="/MiaoSha"><span>秒杀商品</span></router-link>
        </el-menu-item>
      </el-menu>
 
</div>
<div class="HouTai-right" style=" width: 1000px; height: 600px;   display: inline-block; vertical-align: top;">
<router-view></router-view>
</div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
    .HouTai-left{
  width: 200px;
  display: inline-block;
  vertical-align: top;
}
</style>